<template>
  <Card :tab-list="tabListTitle" v-bind="$attrs" hoverable :active-tab-key="activeKey" @tabChange="onTabChange">
    <template #tabBarExtraContent>
      <div class="extra-item">
        <template v-for="item in dataTypeArray" :key="item.key">
          <a href="javascript:;" v-if="item.enabled" @click="onChangeDateType(item.key)">{{ item.title }}</a>
        </template>
        <!--        <a-range-picker style="margin-left: 20px"/>-->
        <a-date-picker picker="year" style="margin-left: 20px" @change="yearChange" />
        <a-select v-model:value="value" :filterOption="false" allow-clear show-search placeholder="请选择地区" :fieldNames="fieldNames" style="margin-left: 5px; width: 200px" @change="airportChange" :options="options" @search="search"></a-select>
      </div>
    </template>
    <p>
      <a-row>
        <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
          <VisitAnalysisBar :dateRuleCode="dateRuleCode" :dataType="activeKey" :dateTypeValue="dateTypeValue" :airportId="airportId" />
        </a-col>
        <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
          <RankingBar :dateRuleCode="dateRuleCode" :dataType="activeKey" :dateTypeValue="dateTypeValue" :airportId="airportId" />
        </a-col>
      </a-row>
    </p>
  </Card>
</template>
<script lang="ts" setup>
import { inject, onMounted, ref } from 'vue';
import { Card, SelectProps } from 'ant-design-vue';
import VisitAnalysisBar from './VisitAnalysisBar.vue';
import RankingBar from './RankingBar.vue';
import { airportList } from '@apps/ant-bus/src/views/business/airport/data/api';
const value = ref();
const options = ref<SelectProps['options']>([]);
const activeKey = ref('tab1');
const dateRuleCode = ref('year');
let dateType = inject<any>('dateType');
let dateTypeValue = inject<any>('dateTypeValue');
let airportId = inject<any>('airportId');
const fieldNames = {
  label: 'airportName',
  value: 'airportId',
};
const dataTypeArray = [
  {
    key: 'day',
    enabled: true,
    title: '本日',
  },
  {
    key: 'week',
    enabled: true,
    title: '本周',
  },
  {
    key: 'month',
    enabled: true,
    title: '本月',
  },
  {
    key: 'year',
    enabled: true,
    title: '本年',
  },
];

const tabListTitle = [
  {
    key: 'tab1',
    tab: '成交额',
  },
  {
    key: 'tab2',
    tab: '售卡量',
  },
  {
    key: 'tab3',
    tab: '退卡量',
  },
  {
    key: 'tab4',
    tab: '退款金额',
  },
  {
    key: 'tab5',
    tab: '贵宾厅核销使用',
  },
  {
    key: 'tab6',
    tab: '净卡量',
  },
];

function onTabChange(key) {
  activeKey.value = key;
}

function onChangeDateType(key) {
  dateType.value = key;
  dateRuleCode.value = key;
}

function yearChange(data, dateStr) {
  dateRuleCode.value = 'year';
  dateTypeValue.value = dateStr;
}
function airportChange() {
  airportId.value = value.value;
}
function search(value) {
  airportList({
    airportName: value,
  }).then((res) => {
    options.value = res;
  });
}
onMounted(() => {
  airportList({
    airportName: '',
  }).then((res) => {
    options.value = res;
  });
});
</script>
<style lang="less" scoped>
.extra-item {
  display: inline-block;
  margin-right: 24px;

  a {
    margin-left: 24px;
  }
}
</style>
